@mixin legend() {
  .esri-legend {
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 250ms ease-in-out;
  }

  .esri-legend__message {
    padding: 0.5em 1em;
  }

  .esri-legend__service {
    word-wrap: break-word;
    border-bottom: 1px solid $border_color;
    padding: $cap_spacing $side_spacing 0 $side_spacing;
  }

  .esri-legend__service:last-child {
    border-bottom: none;
  }

  .esri-legend__service-label {
    margin: 0 0 floor($cap_spacing/2) 0;
    font-size: $h2_text_size;
    font-weight: $text_weight_header;
  }

  .esri-legend__group-layer-child {
    margin-left: floor($side_spacing/2);
  }

  .esri-legend__layer-table {
    display: table;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: $cap_spacing;
  }

  .esri-legend__layer-child-table {
    display: table;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: $cap_spacing;
  }

  .esri-legend__layer-body {
    margin-left: floor($side_spacing/2);
  }

  .esri-legend__layer-row {
    display: table-row;
  }

  .esri-legend__layer-cell {
    display: table-cell;
    min-width: 100px;
    vertical-align: middle;
    word-break: break-word;
    padding: floor($cap_spacing/3) 0;
  }

  .esri-legend__layer-cell--symbols {
    min-width: 10px;
    text-align: center;
  }

  .esri-legend__size-ramp ~ .esri-legend__layer-cell--info {
    max-width: 80%;
    width: 80%;
  }

  .esri-legend__layer-cell--info {
    font-size: $text_size_small;
    padding-left: floor($side_spacing/2);
    padding-right: floor($side_spacing/2);
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .esri-legend__imagery-layer-image--stretched {
    margin-bottom: -2px; //imageData contains extra right and bottom 2px margin
    display: block;
  }

  .esri-legend__imagery-layer-cell--stretched {
    vertical-align: top;
    line-height: 1;
    padding: 0;
  }

  .esri-legend__imagery-layer-info--stretched {
    vertical-align: top;
    padding: 0 2px;
  }

  .esri-legend__symbol {
    display: block;
    margin: auto;
  }

  .esri-legend__layer-caption {
    display: table-caption;
    padding: floor($cap_spacing/2) 0;
  }

  .esri-legend__ramp-labels {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }

  .esri-legend__ramps {
    margin-left: floor($side_spacing/4);
  }

  .esri-legend__color-ramp {
    width: 24px;
  }

  .esri-legend__opacity-ramp {
    background-image: url("../base/images/transparent-bg.png");
  }

  .esri-legend__ramp-tick {
    position: absolute;
    width: 4px;
    border-top: 1px solid $border_color;
    line-height: 0;
    right: 1px;
    left: auto;
  }

  .esri-legend__ramp-label {
    position: relative;
    padding: 0 floor($side_spacing/2);
    white-space: nowrap;
    line-height: 1em;
    font-size: $text_size_small;
    &:before {
      position: absolute;
      top: .25em;
      left: floor($side_spacing/2)*-1;
      display: block;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 3px 4px 3px 0;
      border-color: transparent rgba($text_color, 0.8) transparent transparent;
    }
    &:first-child {
      margin-top: floor($text_size/3) * -1;
    }
    &:last-child {
      bottom: floor($text_size/4) * -1;
    }
  }

  .esri-legend-layer-caption {
    display: table-caption;
    padding: floor($cap_spacing/2) 0;
  }

  //////////////////////////////
  // UI CORNER
  .esri-ui-corner {
    .esri-legend {
      padding: $cap_spacing 0;
      min-width: 180px;
      max-width: 350px;
    }
  }
  // UI CORNER
  //////////////////////////////

@include componentHeight_BasedOnViewSize(esri-legend);

  html[dir="rtl"] {
    .esri-legend__ramp-label:before {
      border-width: 3px 0 3px 4px;
      border-color: transparent transparent transparent rgba($background_inverse_color, 0.5);
      left: auto;
      right: floor($side_spacing/2)*-1;
    }
  }
}

@if $include_Legend == true {
  @include legend();
}
